<template>
  <div class="remoteSend">
    <el-row style="height:100%;">
      <el-col :span="10" style="padding:10px 15px;height:100%;overflow:auto;">
        <search-form
          ref="header"
          :search-data="ruleForm"
          :search-form="searchData"
          :search-handle="searchHandle"
        >
        </search-form>
        <div class="remoteSend-box">
          <el-checkbox-group v-model="checkedArr">
            <el-checkbox
              v-for="(city, index) in realDataArr"
              :key="index"
              :label="city.id"
              class="checkbox"
              >{{ city.name }}</el-checkbox
            >
          </el-checkbox-group>
        </div>
        <div class="remoteSend-box-footer m_t10">
          <el-button type="primary" size="mini" @click="handleAllCheck()"
            >全选</el-button
          >
          <el-button type="primary" size="mini" @click="handleNoAllCheck()"
            >全不选</el-button
          >
          <el-button type="primary" size="mini" @click="handleFanCheck()"
            >反选</el-button
          >
          <el-button type="primary" size="mini" @click="handleRealData()"
            >实时数据</el-button
          >
        </div>
        <el-card
          style="min-height:calc(100% - 410px);margin-top:15px;"
          :body-style="{ padding: 0 }"
        >
          <el-tabs
            type="border-card"
            v-model="activeName"
            @tab-click="handleTabClick"
          >
            <el-tab-pane label="远程室外" name="远程室外">
              <div class="card-items">
                <el-form>
                  <el-form-item :label="houseItems[0].dataName">
                    <el-input
                      v-model="houseItems[0].dataValue"
                      placeholder="输入数值"
                      style="max-width:300px;"
                    ></el-input>
                  </el-form-item>
                </el-form>
                <div class="card-items-bottom">
                  <el-input
                    v-model="improveValue"
                    placeholder="值"
                    style="width:100px;"
                  ></el-input>
                  <el-button
                    type="primary"
                    size="mini"
                    class="m_l10"
                    @click="handleXiaFa('远程室外', '提高')"
                    >提高</el-button
                  >
                  <el-button
                    type="primary"
                    size="mini"
                    class="m_l10"
                    @click="handleXiaFa('远程室外', '降低')"
                    >降低</el-button
                  >
                  <el-button
                    type="primary"
                    size="mini"
                    @click="handleXiaFa('远程室外', '下发')"
                    >下发</el-button
                  >
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="二次泵控制" name="二次泵控制">
              <div class="card-items">
                <el-form :model="sendForm" label-width="110px">
                  <el-row :gutter="10">
                    <el-col :span="8" v-for="(two, i) in twoItems" :key="i">
                      <el-form-item :label="two.dataName">
                        <el-input
                          v-model="two.dataValue"
                          placeholder="值"
                        ></el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-form>
                <div class="card-items-bottom">
                  <el-input
                    v-model="improveValue"
                    placeholder="值"
                    style="width:100px;"
                  ></el-input>
                  <el-button
                    type="primary"
                    size="mini"
                    class="m_l10"
                    @click="handleXiaFa('二次泵控制', '提高')"
                    >提高</el-button
                  >
                  <el-button
                    type="primary"
                    size="mini"
                    class="m_l10"
                    @click="handleXiaFa('二次泵控制', '降低')"
                    >降低</el-button
                  >
                  <el-button
                    type="primary"
                    size="mini"
                    @click="handleXiaFa('二次泵控制', '下发')"
                    >下发</el-button
                  >
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="控制模式" name="控制模式">
              <div class="card-items">
                <el-form :model="sendForm">
                  <el-form-item label="控制模式：">
                    <el-radio-group
                      v-model="sendForm.controlValue"
                      @change="getRightTable"
                    >
                      <el-radio
                        :label="control.id"
                        v-for="control in controlList"
                        :key="control.id"
                        style="margin:0 10px 10px 0;"
                        >{{ control.name }}</el-radio
                      >
                    </el-radio-group>
                  </el-form-item>
                </el-form>
                <el-form label-width="100px">
                  <el-form-item
                    :label="controlZero[0].dataName"
                    v-if="sendForm.controlValue == 0"
                  >
                    <el-input
                      v-model="controlZero[0].dataValue"
                      placeholder="数值"
                      style="width:220px;"
                    ></el-input>
                  </el-form-item>
                  <el-row :gutter="10" v-if="sendForm.controlValue == 1">
                    <el-col :span="8" v-for="(o, idx) in controlOne" :key="idx">
                      <el-form-item :label="o.dataName">
                        <el-input
                          v-model="o.dataValue"
                          placeholder="数值"
                        ></el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row :gutter="10" v-if="sendForm.controlValue == 2">
                    <el-col :span="8" v-for="(o, x) in controlTwo" :key="x">
                      <el-form-item :label="o.dataName">
                        <el-input
                          v-model="o.dataValue"
                          placeholder="数值"
                        ></el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row :gutter="10" v-if="sendForm.controlValue == 3">
                    <el-col
                      :span="8"
                      v-for="(o, idx) in controlThree"
                      :key="idx"
                    >
                      <el-form-item :label="o.dataName">
                        <el-input
                          v-model="o.dataValue"
                          placeholder="数值"
                        ></el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row :gutter="10" v-if="sendForm.controlValue == 4">
                    <el-form-item :label="controlFour[0].dataName">
                      <el-input
                        v-model="controlFour[0].dataValue"
                        placeholder="数值"
                        style="width:220px;"
                      ></el-input>
                    </el-form-item>
                  </el-row>
                  <el-row :gutter="10" v-if="sendForm.controlValue == 5">
                    <el-col :span="8" v-for="(o, d) in controlFive" :key="d">
                      <el-form-item :label="o.dataName">
                        <el-input
                          v-model="o.dataValue"
                          placeholder="数值"
                        ></el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-form>
                <div class="card-items-bottom">
                  <el-input
                    v-model="improveValue"
                    placeholder="值"
                    style="width:100px;"
                  ></el-input>
                  <el-button
                    type="primary"
                    size="mini"
                    class="m_l10"
                    @click="handleXiaFa('控制模式', '提高')"
                    >提高</el-button
                  >
                  <el-button
                    type="primary"
                    size="mini"
                    class="m_l10"
                    @click="handleXiaFa('控制模式', '降低')"
                    >降低</el-button
                  >
                  <el-button
                    type="primary"
                    size="mini"
                    @click="handleXiaFa('控制模式', '下发')"
                    >下发</el-button
                  >
                </div>
              </div>
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </el-col>
      <!-- 右侧内容 -->
      <el-col :span="14">
        <div class="right-content">
          <el-tabs
            type="card"
            v-model="activeVal"
            @tab-click="handleRightTab()"
          >
            <el-tab-pane label="实时数据" name="1">
              <el-table
                :header-cell-style="{
                  padding: '10px 0',
                  color: 'rgb(0, 127, 235)',
                  backgroundColor: '#f8f8f8',
                }"
                size="medium"
                :data="tableList"
                :height="tableHeight"
                style="width: 100%"
              >
                <template v-for="(item, t) in tableColumn" :key="t">
                  <el-table-column
                    :label="item.label"
                    :width="item.width"
                    v-if="!item.children"
                    align="center"
                  >
                    <template #default="scope">
                      <span
                        v-if="
                          scope.row[item.prop] &&
                            scope.row[item.prop].value != undefined &&
                            scope.row[item.prop].value != null
                        "
                        v-html="
                          valueFormatter(item.prop, scope.row[item.prop].value)
                        "
                      >
                      </span>

                      <span v-else>{{ scope.row[item.prop] }}</span>
                    </template>
                  </el-table-column>

                  <el-table-column
                    :label="item.label"
                    :width="item.width"
                    align="center"
                    v-else
                  >
                    <template
                      v-for="(child, index) in item.children"
                      :key="index"
                    >
                      <el-table-column :label="child.dataName" align="center">
                        <template #default="scope">
                          <span
                            v-if="
                              scope.row[child.props] &&
                                scope.row[child.props].value != undefined &&
                                scope.row[child.props].value != null
                            "
                          >
                            {{ scope.row[child.props].value }}
                          </span>

                          <span v-else>{{ scope.row[child.props] }}</span>
                        </template>
                      </el-table-column>
                    </template>
                  </el-table-column>
                </template>
              </el-table>
            </el-tab-pane>
            <el-tab-pane label="下发数据列表" name="2">
              <el-table
                :header-cell-style="{
                  padding: '10px 0',
                  color: 'rgb(0, 127, 235)',
                  backgroundColor: '#f8f8f8',
                }"
                :row-class-name="tableRowClassName"
                size="medium"
                :data="sendTableData"
                :height="tableHeight"
                style="width: 100%"
              >
                <template v-for="(item, t) in tableTitle" :key="t">
                  <el-table-column
                    :prop="item.prop"
                    :label="item.label"
                    :width="item.width"
                  />
                </template>
              </el-table>
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import searchForm from "@/components/SearchForm/index.vue";
import { getHeatSourcePermisstion } from "@/api/heatSource";
import { getSendList, getJieNengType, sendData } from "@/api/remoteSend";
import { getRealDatas } from "@/api/realDataManage";
import heightMinxin from "@/utils/tableHeight.mixin";
import { parseTime } from "@/utils/index";
import {
  rightTableTitle,
  twoBengTitleArr,
  FenShiKaiDuArr,
  FenShiTempArr,
  FenShiLiuLiangArr,
  DotComporeDotArr,
  twoBengItems,
  controlZeroArr,
  controlOneArr,
  controlTwoArr,
  controlThreeArr,
  controlFourArr,
  controlFiveArr,
} from "./index";

export default {
  name: "remoteSend",
  mixins: [heightMinxin],
  components: { searchForm },
  data() {
    return {
      ruleForm: {
        radio: 0,
        heatSourceId: "",
        userType: "",
        heatModel: "",
        heatingType: "",
      },
      realDataArr: [],
      checkedArr: [],
      searchData: [
        {
          type: "Radio",
          prop: "radio",
          radios: [
            { label: "临时勾选", value: 0 },
            { label: "分组", value: 1 },
          ],
          change: () => {
            this.handleRadioChange();
          },
        },
        {
          type: "Select",
          prop: "heatSourceId",
          placeholder: "选择热源",
          label: "选择热源",
          options: [],
          disabled: true,
          change: () => {
            this.getSendData();
          },
        },
        {
          type: "Select",
          prop: "userType",
          placeholder: "用户类型",
          disabled: true,
          width: "180",
          options: [],
          change: () => {
            this.getSendData();
          },
        },
        {
          type: "Select",
          prop: "heatModel",
          placeholder: "供热模式",
          disabled: true,
          width: "180",
          options: [],
          change: () => {
            this.getSendData();
          },
        },
        {
          type: "Select",
          prop: "heatingType",
          placeholder: "节能类型",
          disabled: true,
          width: "180",
          options: [],
          change: () => {
            this.getSendData();
          },
        },
      ],
      searchHandle: [],
      activeName: "远程室外",
      houseItems: [
        //远程室外
        {
          dataName: "远程室外",
          dataValue: "",
        },
      ],
      twoItems: twoBengItems, //二次泵
      controlList: [
        { id: 0, name: "手动" },
        { id: 1, name: "分时开度" },
        { id: 2, name: "分时温度" },
        { id: 3, name: "分时流量" },
        { id: 4, name: "恒定流量" },
        { id: 5, name: "点对点温度" },
      ], //控制模式
      sendForm: {
        controlValue: 0,
      },
      controlZero: controlZeroArr,
      controlOne: [], //分时开度
      controlTwo: [], //分时温度
      controlThree: [], //分时流量
      controlFour: controlFourArr,
      controlFive: [], //点对点
      improveValue: 2,
      activeVal: "1",
      sendTableData: [], //下发列表
      tableTitle: [
        { prop: "heatSystemName", label: "系统名称" },
        { prop: "dataName", label: "数据名称" },
        { prop: "dataValue", label: "值" },
        { prop: "currentDate", label: "日期" },
        { prop: "sendMsg", label: "发送状态" },
      ],
      extraHeigh: 100,
      tableList: [],
    };
  },
  computed: {
    tableColumn() {
      let tableDataTitle = rightTableTitle;
      if (this.activeName == "远程室外") {
        let title = [{ prop: "远程室外", label: "远程室外" }];
        return [...tableDataTitle, ...title];
      } else if (this.activeName == "二次泵控制") {
        return [...tableDataTitle, ...twoBengTitleArr];
      } else if (this.activeName == "控制模式") {
        let title = [{ prop: "控制模式", label: "控制模式" }];
        const { controlValue } = this.sendForm;
        if (controlValue == 0) {
          let list = [{ prop: "手动给定", label: "手动给定" }];
          return [...tableDataTitle, ...title, ...list];
        } else if (controlValue == 1) {
          return [...tableDataTitle, ...title, ...FenShiKaiDuArr];
        } else if (controlValue == 2) {
          return [...tableDataTitle, ...title, ...FenShiTempArr];
        } else if (controlValue == 3) {
          return [...tableDataTitle, ...title, ...FenShiLiuLiangArr];
        } else if (controlValue == 4) {
          let hengDingArr = [{ prop: "恒流量目标", label: "恒流量目标" }];
          return [...tableDataTitle, ...title, ...hengDingArr];
        } else {
          return [...tableDataTitle, ...title, ...DotComporeDotArr];
        }
      }
    },
  },
  async mounted() {
    this.controlOne = controlOneArr;
    this.controlTwo = controlTwoArr;
    this.controlThree = controlThreeArr;
    this.controlFive = controlFiveArr;
    this.init();
  },
  methods: {
    async init() {
      this.getHeatSourceList(); //获取热源

      const userTypeArr = await this.getHeatTypeList("userType");
      this.searchData[2].options = userTypeArr;
      const heatModelArr = await this.getHeatTypeList("heatModel");
      this.searchData[3].options = heatModelArr;
      const heatTypeArr = await this.getHeatTypeList("heatingType");
      this.searchData[4].options = heatTypeArr;

      this.getSendData();
    },
    handleRadioChange() {
      if (this.ruleForm.radio === 0) {
        this.searchData.map((item) => {
          if (item.type !== "Radio") {
            item.disabled = true;
          }
          return item;
        });
      } else {
        this.searchData.map((item) => {
          if (item.type !== "Radio") {
            item.disabled = false;
          }
          return item;
        });
      }

      this.getSendData();
    },
    /**
     * 格式化数据
     */
    valueFormatter(scope, value) {
      if (value == 0 && scope !== "控制模式") {
        return 0;
      } else if (scope == "控制模式") {
        if (value == 0) {
          return "手动";
        } else if (value == 1) {
          return "分时开度";
        } else if (value == 2) {
          return "分时温度";
        } else if (value == 3) {
          return "分时流量";
        } else if (value == 4) {
          return "恒定流量";
        } else if (value == 5) {
          return "点对点温度";
        }
      } else if (value == null) {
        return "";
      } else {
        return value;
      }
    },
    tableRowClassName({ row }) {
      if (row.sendMsg == "无效的数据点！") {
        return "warning-row";
      }
      return "";
    },
    /**获取热源列表 */
    async getHeatSourceList() {
      const { data: res } = await getHeatSourcePermisstion();
      if (res.success) {
        const list = res.data.map((item) => {
          return { label: item.name, value: item.id };
        });
        this.searchData[1].options = list;
      }
    },
    /**
     * 获取节能类型
     */
    getHeatTypeList(type) {
      return new Promise((resolve) => {
        getJieNengType({ typeName: type }).then((res) => {
          if (res.data.success) {
            const result = res.data.data.map((item) => {
              return { label: item[type], value: item[type] };
            });
            resolve(result);
          }
        });
      });
    },
    getSendData() {
      const {
        radio,
        heatSourceId,
        heatingType,
        userType,
        heatModel,
      } = this.ruleForm;
      let params = {};
      if (radio == 0) {
        params = {
          heatSourceId: "",
          heatingType: "",
          userType: "",
          heatModel: "",
        };
      } else {
        params = {
          heatSourceId,
          heatingType,
          userType,
          heatModel,
        };
      }

      getSendList(params).then((res) => {
        if (res.data.success) {
          this.realDataArr = res.data.data;
          this.checkedArr = [];
        }
      });
    },
    /**
     * 点击全选
     */
    handleAllCheck() {
      this.checkedArr = this.realDataArr.map((item) => item.id);
    },
    /**全不选 */
    handleNoAllCheck() {
      this.checkedArr = [];
    },
    /**反选 */
    handleFanCheck() {
      this.checkedArr = this.realDataArr
        .filter((item) => {
          return !this.checkedArr.includes(item.id);
        })
        .map((item) => {
          return item.id;
        });
    },
    /**下发 */
    handleXiaFa(type, name) {
      this.$confirm(`您确认要${name}${type}项的值吗?`, "提示", {
        cancelButtonClass: "btn-custom-cancel",
        cancelButtonText: "取消",
        confirmButtonText: "确定",
        type: "warning",
      })
        .then(async () => {
          let params = {};
          let checkList = this.checkedArr;
          if (type == "远程室外") {
            let arr = checkList.map((item) => {
              let objItem = this.realDataArr.find((v) => v.id === item);
              let itemObj = {
                heatSourceId: objItem.heatSourceId,
                heatSourceName: objItem.heatSourceName,
                heatStationId: objItem.heatStationId,
                heatSystemId: objItem.id,
                heatStationName: objItem.heatStationName,
                heatSystemName: objItem.name,
                dataName: this.houseItems[0].dataName,
              };
              if (name == "提高") {
                itemObj.dataValue = this.improveValue;
                itemObj.increment = true;
              } else if (name == "降低") {
                itemObj.dataValue = -1 * Number(this.improveValue);
                itemObj.increment = true;
              } else {
                itemObj.dataValue = this.houseItems[0].dataValue;
              }
              return itemObj;
            });
            params = this.filterEmpty(arr);
          } else if (type == "二次泵控制") {
            params = this.getParamsData(this.twoItems, name);
          } else {
            //控制模式
            const { controlValue } = this.sendForm;
            if (controlValue == 0) {
              //手动
              let arrList = checkList.map((item) => {
                let Item = this.realDataArr.find((v) => v.id === item);
                let itemObj = {
                  heatSourceId: Item.heatSourceId,
                  heatSourceName: Item.heatSourceName,
                  heatStationId: Item.heatStationId,
                  heatSystemId: Item.id,
                  heatStationName: Item.heatStationName,
                  heatSystemName: Item.name,
                  dataName: this.controlZero[0].dataName,
                };
                if (name == "提高") {
                  itemObj.dataValue = this.improveValue;
                  itemObj.increment = true;
                } else if (name == "降低") {
                  itemObj.dataValue = -1 * Number(this.improveValue);
                  itemObj.increment = true;
                } else {
                  itemObj.dataValue = this.controlZero[0].dataValue;
                }
                return itemObj;
              });
              if (name == "下发") {
                params = this.filterEmpty(arrList);
              } else {
                params = arrList;
              }
            } else if (controlValue == 1) {
              params = this.getParamsData(this.controlOne, name);
            } else if (controlValue == 2) {
              params = this.getParamsData(this.controlTwo, name);
            } else if (controlValue == 3) {
              params = this.getParamsData(this.controlThree, name);
            } else if (controlValue == 4) {
              let fourList = checkList.map((item) => {
                let Item = this.realDataArr.find((v) => v.id === item);
                let itemObj = {
                  heatSourceId: Item.heatSourceId,
                  heatSourceName: Item.heatSourceName,
                  heatStationId: Item.heatStationId,
                  heatSystemId: Item.id,
                  heatStationName: Item.heatStationName,
                  heatSystemName: Item.name,
                  dataName: this.controlFour[0].dataName,
                };
                if (name == "提高") {
                  itemObj.dataValue = this.improveValue;
                  itemObj.increment = true;
                } else if (name == "降低") {
                  itemObj.dataValue = -1 * Number(this.improveValue);
                  itemObj.increment = true;
                } else {
                  itemObj.dataValue = this.controlFour[0].dataValue;
                }
                return itemObj;
              });
              if (name == "下发") {
                params = this.filterEmpty(fourList);
              } else {
                params = fourList;
              }
            } else if (controlValue == 5) {
              params = this.getParamsData(this.controlFive, name);
            }
          }
          await sendData(params).then((res) => {
            if (res.data.success) {
              this.$message.success(res.data.msg);
              setTimeout(() => {
                this.activeVal = "2";
                const list = res.data.data;
                const result = list.map((item) => {
                  item.currentDate = parseTime(
                    new Date(),
                    "{y}-{m}-{d} {h}:{i}"
                  );
                  return item;
                });
                this.sendTableData = [...result, ...this.sendTableData];
                // document.body.scrollTop = 0;
              }, 1000);
            }
          });
        })
        .catch((error) => {});
    },
    /**过滤为空的值 */
    filterEmpty(arr) {
      let result = arr.filter((item) => item.dataValue !== "");
      return result;
    },
    getParamsData(data, name) {
      let checkData = this.checkedArr;
      let filterArr = [];
      if (name == "下发") {
        filterArr = this.filterEmpty(data);
      } else {
        filterArr = data;
      }

      let result = [];
      for (let j = 0; j < checkData.length; j++) {
        let itemObj = this.realDataArr.find((n) => n.id === checkData[j]);

        for (let i = 0; i < filterArr.length; i++) {
          let currentItem = filterArr[i];
          let obj = {
            heatSourceId: itemObj ? itemObj.heatSourceId : "",
            heatSourceName: itemObj ? itemObj.heatSourceName : "",
            heatStationId: itemObj ? itemObj.heatStationId : "",
            heatSystemId: itemObj ? itemObj.id : "",
            heatStationName: itemObj ? itemObj.heatStationName : "",
            heatSystemName: itemObj ? itemObj.name : "",
            dataName: currentItem.dataName,
          };
          if (name == "提高") {
            obj.dataValue = this.improveValue;
            obj.increment = true;
          } else if (name == "降低") {
            obj.dataValue = -1 * Number(this.improveValue);
            obj.increment = true;
          } else {
            obj.dataValue = currentItem.dataValue;
          }
          result.push(obj);
        }
      }
      return result;
    },
    /**tab选择 */
    handleTabClick() {
      this.improveValue = 2;
      if (this.activeName == "远程室外") {
        this.houseItems[0].dataValue = "";
      } else if (this.activeName == "二次泵控制") {
        this.twoItems.map((item) => {
          item.dataValue = "";
          return item;
        });
      } else {
        this.sendForm.controlValue = 0;
        this.controlZero[0].dataValue = "";
      }
      this.getRightTable();
    },
    /**右侧tab */
    handleRightTab() {},
    /**
     * 点击实时数据
     */
    handleRealData() {
      this.activeVal = "1";
      this.getRightTable();
    },
    /**查询右侧表格 */
    getRightTable() {
      if (this.activeVal == "1") {
        var fieldArr = [];
        if (this.activeName == "远程室外") {
          fieldArr = ["远程室外"];
        } else if (this.activeName == "二次泵控制") {
          fieldArr = twoBengItems.map((v) => v.dataName);
        } else {
          const { controlValue } = this.sendForm;

          if (controlValue == 0) {
            fieldArr = ["控制模式", "手动给定"];
          } else if (controlValue == 1) {
            let arr = this.filterName(controlOneArr);
            fieldArr = ["控制模式"].concat(arr);
          } else if (controlValue == 2) {
            let list = this.filterName(controlTwoArr);
            fieldArr = ["控制模式"].concat(list);
          } else if (controlValue == 3) {
            let list1 = this.filterName(controlThreeArr);

            fieldArr = ["控制模式"].concat(list1);
          } else if (controlValue == 4) {
            let arrList = this.filterName(this.controlFour);
            fieldArr = ["控制模式"].concat(arrList);
          } else {
            let arrlist = this.filterName(this.controlFive);
            fieldArr = ["控制模式"].concat(arrlist);
          }
        }

        getRealDatas({ heatSystemIds: this.checkedArr, fields: fieldArr }).then(
          (res) => {
            if (res.data.success) {
              this.tableList = res.data.data;
            }
          }
        );
      }
    },
    filterName(arr) {
      let result = arr.map((item) => item.dataName);
      return result;
    },
  },
};
</script>

<style lang="less">
.el-table .warning-row {
  color: #f56c6c;
}
.remoteSend {
  width: 100%;
  height: 100%;
  overflow: hidden;
  .remoteSend-box {
    min-height: 286px;
    max-height: 286px;
    overflow: auto;
    width: 100%;
    border: 1px solid #ccc;
    padding: 20px;
    box-sizing: border-box;
    border-radius: 4px;
    .checkbox {
      margin: 0 0 10px 0;
      width: 33%;
      .el-checkbox__label {
        font-size: 13px;
      }
    }
  }
  .card-items {
    padding: 20px;
    .card-items-bottom {
      margin: 40px 0 0 40px;
    }
  }
}
.remoteSend .el-card__header {
  padding: 10px 20px 0 20px;
}

.right-content {
  border-left: 1px solid #ccc;
  height: 100%;
  padding: 10px;
  box-sizing: border-box;
}
.remoteSend .el-tabs--border-card {
  border: none;
  box-shadow: none;
}
</style>
